<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>配置项dataset-数据集存储</title>
  <script src="./echarts.js"></script>
  <style lang="css">
    #chart1 {
      width: 100%;
      height: 650px;
      /* border: 1px solid red; */
      float: left;
    }
  </style>
</head>

<body>
  <div id="chart1"></div>

  <script>
    const myChart1 = echarts.init(document.getElementById('chart1'));

    myChart1.setOption({
      legend: {},
      tooltip: {},
      yAxis: {},
      /* // 原来的书写方式：用series和其他轴的data
      xAxis: {
        data: ['iphone4', 'iphone5', 'iphone6', 'iphone6s', 'iphone7'],
      },
      series: [
        {
          type: 'bar',
          name: '2014',
          data: [89.3, 92.1, 94.4, 85.4]
        },
        {
          type: 'bar',
          name: '2015',
          data: [95.8, 89.4, 91.2, 76.9]
        },
        {
          type: 'bar',
          name: '2016',
          data: [97.7, 83.1, 92.5, 78.1]
        }
      ], */
      xAxis: {
        type: 'category',
      },
      series: [
        { type: 'bar' },
        { type: 'bar' },
        { type: 'bar' },
      ],
      dataset: {
        // source: [
        //   // 第一行是维度名称, 维度名称(从第二个开始)会被解析为系列名称
        //   // 第一列(从第二个开始)会被解析成x轴的类目名称
        //   ['product', '2014', '2015', '2016'],
        //   ['iphone4', 89.3, 92.1, 94.4],
        //   ['iphone5', 95.8, 89.4, 91.2],
        //   ['iphone6', 97.7, 83.1, 92.5],
        //   ['iphone7', 99.9, 86.4, 94.1],
        // ],
        sourceHeader: true, // 第一行/列是否解析为维度名信息
        // 单独定义维度，定义之后就不从source中解析维度了
        dimensions: ['product', '2014', '2015', {
          name: '2016', // 维度名称
          type: 'number', // 维度类型
        }],

        // source第二种书写方式
        // source: [
        //   // 可以写对象，格式如下
        //   { product: 'iphone4', '2014': 43.3, '2015': 42.1, '2016': 34.4 },
        //   { product: 'iphone5', '2014': 89.3, '2015': 92.1, '2016': 94.4 },
        //   { product: 'iphone6', '2014': 86.3, '2015': 22.1, '2016': 64.4 },
        //   { product: 'iphone7', '2014': 89.3, '2015': 72.1, '2016': 54.4 }
        // ],

        // source第三种书写方式
        source: {
          product: ['iphone4', 'iphone5', 'iphone6', 'iphone7'],
          '2014': [43.3, 69.3, 46.3, 59.3],
          '2015': [22.1, 42.1, 52.1, 62.1],
          '2016': [34.4, 54.4, 64.4, 74.4],
          '2017': [44.4, 64.4, 34.4, 24.4]
        }
      }
    })
  </script>
</body>

</html>